﻿<div>
    <span class="avatar-item">
        <Badge Count="1">
            <Avatar Shape="AvatarShape.Square" Icon="@IconType.Outline.User" />
        </Badge>
    </span>
    <span>
        <Badge Dot>
            <Avatar Shape="AvatarShape.Square" Icon="@IconType.Outline.User" />
        </Badge>
    </span>
</div>
<style>
    /* tile uploaded pictures */
    .avatar-item {
        margin-right: 24px;
    }

    [class*='-col-rtl'] .avatar-item {
        margin-right: 0;
        margin-left: 24px;
    }
</style>